<template>
  <div class="home-footer">
    <div class="title">极速获取专属额度</div>
    <div class="header">认识优品用呗 | 专业一站式借款服务</div>
    <div class="bottom-icon">
      <div v-for="item in iconArr" class="icon">
        <van-image :src="item.icon" height="40" width="40" class="icon-img">
        </van-image>
        <span class="icon-text">{{ item.text }}</span>
        <span class="icon-tip">{{ item.tip }}</span>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { mockApi } from "@/utils/util";
import icon3 from "@/assets/channel/footer-user.png";
import icon2 from "@/assets/channel/footer-zyhg.png";
import icon1 from "@/assets/channel/footer-aqjm.png";

const iconArr = ref([
  { icon: icon1, text: "安全加密", tip: "荣获多项信息安全证书" },
  { icon: icon2, text: "专业合规", tip: "官方出品 资质齐全" },
  { icon: icon3, text: "服务千万用户", tip: "累计服务人数" },
]);

onMounted(async () => {});
</script>

<style lang="scss" scoped>
.home-footer {
  margin-top: 15px;
  .title {
    margin-bottom: 8px;
    color: #e6232b;
    text-align: center;
    font-weight: bold;
  }
  .header {
    padding: 10px;
    color: #fff4c9;
    width: 100%;
    background-size: cover;
    height: auto;
    background-image: url("@/assets/channel/bg-footer.png");
  }
  .bottom-icon {
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    margin-bottom: 60px;
    background-color: #fff;
    display: flex;
    // margin-top: 20px;
    padding: 20px 0 30px;
    justify-content: space-around;
    .icon {
      display: flex;
      flex-direction: column;
      align-items: center;
      line-height: 1.4;
      &-image {
      }
      &-text {
        font-size: 12px;
        // color: ;
      }
      &-tip {
        font-size: 10px;
        color: #7e7d7d;
      }
    }
  }
}
</style>
